
import React, { Component } from 'react';
import { Table, Tabs, Input, Button, Form, Modal } from 'antd';
import { apiProviderPage, apiProviderFreeze, } from '@/request/callServicer/servicer'
import TheButton from '@/components/TheButton';

import TheQueryForm from '@/components/TheQueryForm';
import _ from 'lodash';
import store from "@/store/store"
const { confirm } = Modal;
const { TabPane } = Tabs;
const { Search } = Input;
export default class ServerAuth extends Component {
  constructor() {
    super()
    this.queryFormRef = React.createRef()

    this.state = {
      form_show: true,
      searchOption: [
        { field: 'nameOrId', label: '服务者姓名/id', placeholder: '支持模糊查询', required: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'mobile', label: '服务者手机号', placeholder: '请输入服务者手机号', required: false, rules: [], type: 'Input', defaultValue: '' },

        {
          field: 'orderService', label: '接单服务', placeholder: '请输入接单服务', required: false, rules: [], type: 'Select',
          options: [{ label: '全部', value: '', }, { label: '喂猫', value: '喂猫' }, { label: '喂狗', value: '喂狗' }, { label: '洗猫', value: '洗猫' }, { label: '洗狗', value: '洗狗' }],
          defaultValue: ''
        },
        {
          field: 'accountStatus', label: '用户状态', placeholder: '请选择用户状态', required: false, rules: [], type: 'Select', defaultValue: '',
          options: [{ label: '正常', value: '1', }, { label: '冻结', value: '2' }]
        }
      ],
      queryForm: {},

      columns: [
        {
          title: 'ID',
          dataIndex: 'providerId',
          key: 'providerId',
          width: 200
        },
        {
          title: '服务者姓名',
          dataIndex: 'name',
          width: 180,
          key: 'name',
          render: (text, content) => <div style={{ width: '150px', wordBreak: 'break-all', whiteSpace: 'break-spaces' }}>{text}</div>
        },

        {
          title: '手机号',
          dataIndex: 'mobile',
          key: 'mobile',
          width: 150
        },
        {
          title: '接单服务',
          dataIndex: 'orderService',
          key: 'orderService',
          width: 300,
          render: (text, content) => <div style={{ width: '250px', wordBreak: 'break-all', whiteSpace: 'break-spaces' }}>{text}</div>
        },
        {
          title: '最近修改时间',
          dataIndex: 'updateTime',
          key: 'updateTime',
          width: 200,
          render: (text, content) => <div style={{ width: '120px', wordBreak: 'break-all', whiteSpace: 'break-spaces' }}>{text}</div>
        },
        {
          title: '用户状态',
          dataIndex: 'accountStatus',
          key: 'accountStatus',
          width: 100,
          render: (text, content) => <div style={{ width: '250px', wordBreak: 'break-all', whiteSpace: 'break-spaces' }}>{text == 1 ? '正常' : '冻结'}</div>
        },
        {
          title: '操作',
          dataIndex: 'operate',
          width: 300,
          key: 'operate',
          render: (text, content) => {
            return (
              <div>
                {
                  content.accountStatus == 1 ? <TheButton haspermi={['call:servicerList:freeze']} type='link' onClick={() => this.onFreeze(content)}>冻结</TheButton> :
                    <TheButton haspermi={['call:servicerList:openFreeze']} type='link' onClick={() => this.onOpenFreeze(content)}>解冻</TheButton>

                }

                <TheButton haspermi={['call:servicerList:view']}  type='link' onClick={() => this.handleLook(content)}>查看</TheButton>
                <TheButton haspermi={['call:servicerList:edit']}  type='link' onClick={() => this.handleEdit(content)}>修改</TheButton>
              </div>
            )
          },
        },
      ],
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10,

      },
      total: 0,

      searchParams: {
        name: '',
        mobile: ''
      },
      name: '11111'
    }
  }
  componentDidMount() {
    let searchParams = store.getState().searchValue
    let { pageNo, pageSize, queryForm, pathName } = searchParams
    if (searchParams && pageNo && pathName == 'callServicer') {
      this.setState({
        queryForm,
        pageData: {
          pageNo: pageNo, pageSize: pageSize
        }
      }, () => {
        this.queryFormRef.onSetDefault({
          ...queryForm
        })
        this.getData()
      })
    } else {
      this.getData()
    }
  }
  getData = (values) => {
    let { pageNo, pageSize } = this.state.pageData

    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      const params = {
        pageNo, pageSize, queryForm: this.state.queryForm
      }
      store.dispatch({
        type: 'SaveSearchValues',
        data: {
          pathName: 'callServicer',
          ...params
        }
      })
      apiProviderPage({ pageNo, pageSize, ...this.state.queryForm }).then(res => {
        if (res.code == 0) {
          this.setState({
            dataSource: res.data.records,
            pageData: {
              ...this.state.pageData,
            },
            total: res.data.total
          })
        }
      })
    })
  }
  handleEdit = (row) => {
    this.props.history.push({
      pathname: `/call/servicer/servicerList/detail/${row.providerId}/edit`,
      query: { providerId: row.providerId, mode: 'edit' }
    })
  }
  handleLook = (row) => {
    this.props.history.push({
      pathname: `/call/servicer/servicerList/detail/${row.providerId}/view`,
      query: { providerId: row.providerId, mode: 'view' }
    })
  }
  tabChange = (e) => {
    this.refForm.current.resetFields()
    this.setState({
      approvalStatus: e,
      pageNo: 1,
      searchParams: {
        name: '',
        mobile: ''
      },
      name: ''
    }, () => {
      this.getData()
    })
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  };
  onReset() {
    this.setState({
      queryForm: {}
    }, () => {
      this.pageChange(1, 10)
    })
  }
  onFormSearch(values) {
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.getData(values)
    })
  }
  onFreeze(row) {
    const { providerId } = row
    confirm({
      title: '提示',
      content: '冻结后，该服务者将无法接单，也无法进行提现操作！是否继续？',
      okText: '继续',
      cancelText: '取消',
      onOk: () => {
        console.log('OK');
        apiProviderFreeze({ providerId, accountStatus: 2 }).then(res => {
          if (res.code == 0) {
            React.$message({ type: 'success', content: `操作成功` })
            this.getData()
          }
        })

      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  onOpenFreeze(row) {
    const { providerId } = row
    confirm({
      title: '提示',
      content: '解冻后，该服务者将可以继续接单，可以进行提现操作！是否继续？',
      okText: '继续',
      cancelText: '取消',
      onOk: () => {
        console.log('OK');
        apiProviderFreeze({ providerId, accountStatus: 1 }).then(res => {
          if (res.code == 0) {
            React.$message({ type: 'success', content: `操作成功` })
            this.getData()

          }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  render() {
    const { columns, dataSource, pageData, form_show, searchOption, total } = this.state

    return (
      <div className='p-layout-box'>
        <TheQueryForm ref={(ref) => this.queryFormRef = ref} labelCol={10} show={form_show} option={searchOption}
          onReset={() => this.onReset()}
          onGetValues={(values) => this.onFormSearch(values)} >
        </TheQueryForm>
        <Table columns={columns} dataSource={dataSource} pagination={{
          total: total,
          position: ['bottomCenter'],
          onChange: this.pageChange
        }}
          scroll={{
            y: '60vh',
          }}
          bordered
          onChange={this.onChange} />

      </div>
    );
  }
}